<template>
    <div id="app" class="joindetail">
        <Header notab="join"/>
        <div class="contentWeb">
            <el-breadcrumb separator-class="el-icon-arrow-right" class="detailCrumb">
                <el-breadcrumb-item>招聘会</el-breadcrumb-item>
                <el-breadcrumb-item>报名</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="joincontent clear">
                <div :class="{'sutatusimg': true, 'end': info.zphzt == 4, 'will': info.zphzt == 2}"></div>
                <div class="joinLeft" style="height: 210px">
                    <img :src="zp" style="height: 200px; object-fit: cover">
                </div>
                <div class="joinRight">
                    <div class="titlte">{{info.title}}</div>
                    <div class="deac"><span>举办城市</span><span class="nr">{{info.city}}</span></div>
                    <div class="deac"><span>详细地址</span><span class="nr">{{info.address}}</span></div>
                    <div class="deac"><span>咨询电话</span><span class="nr">{{info.telno}} {{info.telno2}}</span></div>
                    <div class="deac"><span>举办时间</span><span class="nr">{{info.startTime}} - {{info.endtime}}</span>
                    </div>
                </div>

            </div>
           <div class="joinSign">
               <div class="listcount">选择参会职位<span> 已选 {{ Object.keys(xuanzhong).length}}个</span></div>
               <el-row :gutter="20">
                   <el-col :span="8" v-for="(item, index) in positionList" :key="index" @click.native="setxz(item)">
                       <div :class="xuanzhong[item.id] ? 'zhiwei on': 'zhiwei'">
                           <h3>{{item.positionName}}</h3>
                           <div class="jieshao" style="overflow: hidden; height: 22px">
                               <b>{{item.wageRange}}</b>
                               <span v-if="item.experience">{{item.experience}}</span>
                               <span v-if="item.educational">{{item.educational}}</span>
                               <span>招{{item.zprs}}人</span>
                           </div>
                       </div>
                   </el-col>
               </el-row>
               <div style="text-align: center;">
                   <el-pagination
                           background
                           layout="prev, pager, next"
                           @current-change="onPageChange"
                           :page-count="totalPages">
                   </el-pagination>
               </div>
               <div style="text-align: center; padding-top: 40px">
                   <el-button type="success" @click="addJoin" style="width: 298px;background: #20a2b2; border: 0">确定参会</el-button>
               </div>
           </div>
        </div>
        <Footer/>
    </div>
</template>
<script type="text/babel">
// @ is an alias to /src
import Header from '../../components/header'
import Footer from '../../components/footer'
import mt from '../../assets/img/mt.png'
import { PositionByEnterpriseId, GetUrlParam, DetailJobFairId, selectAddJFPosition, enterpriseJoinJopFair } from '../../assets/js/domains'
import zp from '../../assets/img/zp.png'
export default {
  name: 'JobAdd',
  components: { Header, Footer },
  directives: {},
  data: function () {
    return {
      mt: mt,
      info: {},
      zp: zp,
      xuanzhong: {},
      total: 0,
      totalPages: 0,
      positionList: [],
      job_fair_id: 0,
      search: { pageNum: 1, pageSize: 12 }
    }
  },
  created: function () {
    document.title = '确认报名'
    this.job_fair_id = GetUrlParam('id')
  },
  computed: {},
  mounted: function () {
    this.search.enterprise_uid = localStorage.getItem('md_enterpriseUid')
    this.getDetailJobFairId()
    if (this.search.enterprise_uid) {
      this.getpost()
    }
  },
  methods: {
    addJoin: function () {
      var cans = []; var zprs = 0
      for (const key in this.xuanzhong) {
        const item = this.xuanzhong[key]
        zprs += item.zprs
        cans.push({
          enterpriseUid: this.search.enterprise_uid,
          jfId: this.job_fair_id,
          positionId: item.id
        })
      }
      const recruitPositionNum = Object.keys(this.xuanzhong).length
      if (recruitPositionNum === 0) {
        this.$message.error('请选择参会职位！')
        return
      }
      var _this = this
      const md_userInfo = JSON.parse(localStorage.getItem('md_userInfo') || '{}')
      const param = {
        enterpriseUid: this.search.enterprise_uid,
        addressDetail: this.info.address,
        jobFairId: this.job_fair_id,
        joinStatus: 2, // 1：报名，2：已报名，3：已结束
        recruitPositionNum,
        zprs
      }
      enterpriseJoinJopFair(param).then(res => {
        if (!res || res.code != 200) {
          this.$message.error('申请失败')
          return
        }

        selectAddJFPosition(cans).then(function (res) {
          if (res.code === 200) {
            _this.$alert('申请成功！', '提示', {
              confirmButtonText: '确定',
              callback: function () {
                window.location.href = 'join.html'
              }
            })
          } else {
            _this.$alert(res.msg, '提示', {
              confirmButtonText: '确定',
              callback: function () {
              }
            })
          }
        })
      })
    },
    getDetailJobFairId: function () {
      const _this = this
      DetailJobFairId({ job_fair_id: this.job_fair_id, userUid: _this.search.enterprise_uid }).then(function (res) {
        if (res.code === 200) {
          _this.info = res.data
        }
      })
    },
    setxz: function (item) {
      if (this.xuanzhong[item.id]) {
        delete this.xuanzhong[item.id]
      } else {
        this.xuanzhong[item.id] = item
      }

      this.xuanzhong = Object.assign({}, this.xuanzhong)
    },
    getpost: function () {
      const _this = this
      PositionByEnterpriseId(this.search).then(function (res) {
        if (res.code === 200) {
          _this.positionList = res.data.content
          // _this.total = res.data.totalElements
          _this.totalPages = res.data.totalPages
          // console.log(_this.totalPages)
        }
      })
    },
    onPageChange (value) {
      this.search.pageNum = value
      this.getpost()
    },
    tojob: function (id) {
      window.location.href = 'jobDetail.html?id=' + id
    },
    tocompany: function (id) {
      window.location.href = 'companyDetail.html?id=' + id
    }
  }
}
</script>
<style lang="less" scoped>
    @import "../../assets/css/joinDetail";
</style>
